<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" @close="closeDialog"  :close-on-click-modal="false" destroy-on-close  :fullscreen="true" draggable>
		<el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
			<el-tab-pane :class="{'custom-height': isCustomHeight}" label="基本信息" name="base"  >
				<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
					<el-row :gutter="24">
						<el-col :span="12" class="mb20">
							<el-form-item label="所属辖区" prop="regionId">
								<el-tree-select
									:data="regionTreeData"
									:props="{ value: 'id', label: 'name', children: 'children' }"
									check-strictly
									class="w100"
									clearable
									placeholder="请选择所属辖区"
									@node-click="regionNodeClickFun"
									v-model="form.regionId"
								>
								</el-tree-select>
							</el-form-item>
						</el-col>

						<!-- <el-col :span="12" class="mb20">
      <el-form-item label="所属辖区代码" prop="regionNo">
        <el-input v-model="form.regionNo" placeholder="请输入所属辖区代码"/>
      </el-form-item>
      </el-col> -->

						<el-col :span="12" class="mb20">
							<el-form-item label="单位名称" prop="name">
								<el-input v-model="form.name" placeholder="请输入单位名称" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="单位类型" prop="type">
								<el-select filterable clearable v-model="form.type" placeholder="请选择单位类型">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in enterprise_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="统一社会信用代码" prop="creditCode">
								<el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="经济类型" prop="economicType">
								<el-select filterable clearable v-model="form.economicType" placeholder="请选择经济类型">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in economic_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="行业类型" prop="industryType">
								<el-select filterable clearable v-model="form.industryType" placeholder="请选择行业类型">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in industry_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="污染源类别" prop="pollutionSourceCategory">
								<el-select filterable clearable v-model="form.pollutionSourceCategory" placeholder="请选择污染源类别">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in pollution_source_category" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="污染类型" prop="pollutionCategory">
								<el-select filterable clearable v-model="form.pollutionCategory" placeholder="请选择污染类型">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in pollution_category" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="法人代表" prop="legalPerson">
								<el-input v-model="form.legalPerson" placeholder="请输入法人代表" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="法人联系方式" prop="legalPersonContact">
								<el-input v-model="form.legalPersonContact" placeholder="请输入法人联系方式" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="坐标" prop="lonLat">
								<el-input v-model="form.lonLat" placeholder="请输入坐标" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="企业性质" prop="nature">
								<el-select filterable clearable v-model="form.nature" placeholder="请选择企业性质">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in enterprise_nature" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="排污许可情况" prop="pollutionDischargePermit">
								<el-select filterable clearable v-model="form.pollutionDischargePermit" placeholder="请选择排污许可情况">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in have_none" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="正面清单" prop="positiveList">
								<el-select filterable clearable v-model="form.positiveList" placeholder="请选择正面清单">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in positive_list" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="自动监控" prop="automaticMonitor">
								<el-select filterable clearable v-model="form.automaticMonitor" placeholder="请选择自动监控">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="用电监控" prop="electricityMonitor">
								<el-select filterable clearable v-model="form.electricityMonitor" placeholder="请选择用电监控">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="建设项目" prop="constructionProject">
								<el-select filterable clearable v-model="form.constructionProject" placeholder="请选择建设项目">
									<el-option label="请选择">0</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="视频监控" prop="videoMonitor">
								<el-select filterable clearable v-model="form.videoMonitor" placeholder="请选择视频监控">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="信用评价" prop="creditEvaluate">
								<el-select filterable clearable v-model="form.creditEvaluate" placeholder="请选择信用评价">
									<el-option label="请选择">0</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="信息披露企业" prop="informationDisclosure">
								<el-select filterable clearable v-model="form.informationDisclosure" placeholder="请选择信息披露企业">
									<el-option label="请选择">0</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="应急减排" prop="emergencyEmission">
								<el-select filterable clearable v-model="form.emergencyEmission" placeholder="请选择应急减排">
									<el-option label="请选择">0</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="园区企业" prop="park">
								<el-select filterable clearable v-model="form.park" placeholder="请选择园区企业">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="重点关注" prop="important">
								<el-select filterable clearable v-model="form.important" placeholder="请选择重点关注">
									<el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="企业简介" prop="introduction">
								<el-input type="textarea" v-model="form.introduction" placeholder="请输入企业简介" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="企业照片" prop="photos">
								<upload-img  v-model:imageUrl="form.photos"></upload-img>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
        
			</el-tab-pane>
			<!-- 环评批复
验收意见
排污许可
日常检查
清洁生产
固废管理
一考双评
行政处罚
监测报告
应急预案
环境统计 -->

			<el-tab-pane :class="{'custom-height': isCustomHeight}" :disabled="form.id==''" label="环评批复" name="approval">
      <enterprise-approval v-if="enterpriseApprovalShow"></enterprise-approval>
      </el-tab-pane>
			<el-tab-pane :class="{'custom-height': isCustomHeight}" label="验收意见" :disabled="form.id==''" name="third">验收意见</el-tab-pane>
			<el-tab-pane :class="{'custom-height': isCustomHeight}" label="排污许可" :disabled="form.id==''" name="fourth">排污许可</el-tab-pane>
		</el-tabs>

		<template #footer>
			<span class="dialog-footer">
        <el-button type="primary" v-if="saveBaseButton" @click="onSubmit" :disabled="loading">保存基本信息</el-button>
				<el-button @click="closeDialog">取消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="EnterpriseDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/environment/enterprise';
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh','closeForm']);
import { regionTree } from '/@/api/admin/region';

const enterpriseApproval = defineAsyncComponent(() => import('/@/views/environment/enterpriseApproval/index.vue'));
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const regionTreeData = ref<any[]>([]);
const tabsActiveName = ref('base');
const isCustomHeight = ref(true);
const saveBaseButton = ref(true);
const enterpriseApprovalShow = ref(false);
// 定义字典
const {
	enterprise_type,
	pollution_source_category,
	pollution_category,
	economic_type,
	enterprise_nature,
	industry_type,
	yes_no_type,
	have_none,
	positive_list,
} = useDict(
	'enterprise_type',
	'pollution_source_category',
	'pollution_category',
	'economic_type',
	'enterprise_nature',
	'industry_type',
	'yes_no_type',
	'have_none',
	'positive_list'
);

// 提交表单数据
const form = reactive({
	id: '',
	regionId: '',
	regionNo: '',
	name: '',
	type: '',
	creditCode: '',
	economicType: '',
	industryType: '',
	pollutionSourceCategory: '',
	pollutionCategory: '',
	legalPerson: '',
	legalPersonContact: '',
	lonLat: '',
	nature: '',
	pollutionDischargePermit: '',
	positiveList: '',
	automaticMonitor: '',
	electricityMonitor: '',
	constructionProject: '',
	videoMonitor: '',
	creditEvaluate: '',
	informationDisclosure: '',
	emergencyEmission: '',
	park: '',
	important: '',
	introduction: '',
	photos: '',
});

// 定义校验规则
const dataRules = ref({
	regionId: [{ required: true, message: '所属辖区不能为空', trigger: 'blur' }],
	//regionNo: [{required: true, message: '所属辖区代码不能为空', trigger: 'blur'}],
	name: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
	type: [{ required: true, message: '单位类型不能为空', trigger: 'blur' }],
	creditCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
	// economicType: [{required: true, message: '经济类型不能为空', trigger: 'blur'}],
	// industryType: [{required: true, message: '行业类型不能为空', trigger: 'blur'}],
	pollutionSourceCategory: [{ required: true, message: '污染源类别不能为空', trigger: 'blur' }],
	pollutionCategory: [{ required: true, message: '污染类型不能为空', trigger: 'blur' }],
	legalPerson: [{ required: true, message: '法人代表不能为空', trigger: 'blur' }],
	legalPersonContact: [{ required: true, message: '法人联系方式不能为空', trigger: 'blur' }],
	// lonLat: [{required: true, message: '坐标不能为空', trigger: 'blur'}],
	nature: [{ required: true, message: '企业性质不能为空', trigger: 'blur' }],
	//pollutionDischargePermit: [{required: true, message: '排污许可情况不能为空', trigger: 'blur'}],
	//positiveList: [{required: true, message: '正面清单不能为空', trigger: 'blur'}],
	//automaticMonitor: [{required: true, message: '自动监控不能为空', trigger: 'blur'}],
	// electricityMonitor: [{required: true, message: '用电监控不能为空', trigger: 'blur'}],
	// constructionProject: [{required: true, message: '建设项目不能为空', trigger: 'blur'}],
	// videoMonitor: [{required: true, message: '视频监控不能为空', trigger: 'blur'}],
	// creditEvaluate: [{required: true, message: '信用评价不能为空', trigger: 'blur'}],
	// informationDisclosure: [{required: true, message: '信息披露企业不能为空', trigger: 'blur'}],
	// emergencyEmission: [{required: true, message: '应急减排不能为空', trigger: 'blur'}],
	// park: [{required: true, message: '园区企业不能为空', trigger: 'blur'}],
	// important: [{required: true, message: '重点关注不能为空', trigger: 'blur'}],
	// introduction: [{required: true, message: '企业简介不能为空', trigger: 'blur'}],
});

const regionNodeClickFun = (data, node, vm) => {
	form.regionNo = data.regionCode;
	console.log('this _nodeClickFun', data.regionCode, node);
};

const closeDialog = () => {
    dataFormRef.value?.resetFields()
    form.id = '' 
    
    visible.value = false
	emit('closeForm');
	
}


const tabsHandleClick = (tab, event) => {
  if(tab.props.name=='base'){
    saveBaseButton.value=true;
  }else{
    saveBaseButton.value=false;
  }
  if(tab.props.name=='approval'){
	enterpriseApprovalShow.value=true;
  }
	console.log(tab, event);
};

// 初始化辖区数据
const getRegionTreeData = () => {
	// 获取辖区数据
	regionTree().then((res) => {
		regionTreeData.value = res.data;
	});
};
onMounted(()=>{
  
})

const  customHeightStyle =()=> {
      if (isCustomHeight) {
        console.log("customHeightStyle");
        return 'height: '+window.innerHeight+'px;';
      } else {
        return '';
      }
    }

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	form.id = '';
	console.log("id:"+form.id);
	getRegionTreeData();
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
  customHeightStyle();
	// 获取enterprise信息
	if (id) {
		form.id = id;
		getenterpriseData(id);
	}
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 初始化表单数据
const getenterpriseData = (id: string) => {
	// 获取数据
	loading.value = true;
	getObj(id)
		.then((res: any) => {
			Object.assign(form, res.data);
		})
		.finally(() => {
			loading.value = false;
		});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped>
.custom-height {
  width: 100%;
  height: 650px; /* 默认高度 */
  overflow-y:auto;overflow-x:hidden;
}
</style>